<template>
  <div class="regist">
    <div class="title">提交项目申请</div>
    <div class="register-box-content-form">
      <el-form :model="ruleForm" ref="ruleForm" :rules="registerRules">
        <el-form-item label="姓名:" prop="userName" label-width="140px">
          <el-input
            v-model.trim="ruleForm.userName"
            autocomplete="off"
            placeholder="请输入姓名"
          ></el-input>
        </el-form-item>
        <el-form-item label="学校:" prop="school" label-width="140px">
          <el-input
            v-model.trim="ruleForm.school"
            autocomplete="off"
            placeholder="请输入学校"
          ></el-input>
        </el-form-item>
        <el-form-item label="专业:" prop="professional" label-width="140px">
          <el-input
            v-model.trim="ruleForm.professional"
            autocomplete="off"
            placeholder="请输入专业"
          ></el-input>
        </el-form-item>
        <el-form-item label="地址:" prop="address" label-width="140px">
          <el-input
            v-model.trim="ruleForm.address"
            autocomplete="off"
            placeholder="请输入地址"
          ></el-input>
        </el-form-item>
        <el-form-item label="手机号码:" prop="phoneNumber" label-width="140px">
          <el-input
            v-model.trim="ruleForm.phoneNumber"
            autocomplete="off"
            placeholder="请输入手机号码"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="Gitee账号:"
          prop="giteeAccount"
          label-width="140px"
        >
          <el-input
            v-model.trim="ruleForm.giteeAccount"
            autocomplete="off"
            placeholder="请输入Gitee账号"
          ></el-input>
        </el-form-item>
        <el-form-item label="电子邮箱:" prop="email" label-width="140px">
          <el-input
            v-model.trim="ruleForm.email"
            autocomplete="off"
            placeholder="请输入电子邮箱"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="上传学生证:"
          prop="studentImage"
          label-width="140px"
        >
          <cardFile
            :url="uploadUrl"
            :showIcon="true"
            :acceptType="acceptT"
            :imageType="'picture-card'"
            :fileL="fileList"
            @removeFlie="removeF"
            @afterUploaded="afterUploaded"
            :UpType="'image'"
            :iscla="iscla"
          ></cardFile>
          <div class="tips" v-show="isShowImage">
            必须上传一个.jpg, .gif, .png, .jpeg格式的图片
          </div>
        </el-form-item>
        <el-form-item label="" label-width="140px" class="agreeClass">
          <el-checkbox v-model="ischeckBox" @change="changeBox"></el-checkbox
          ><span style="margin-left:4px">我已阅读并同意</span
          ><span style="color:blue;cursor:pointer" @click="open"
            >《学生协议》</span
          >
        </el-form-item>
      </el-form>
    </div>
    <div class="btn">
      <el-button
        type="primary"
        @click="submit"
        :disabled="isDisabled"
        :class="{ submitClass: isDisabled }"
        >提交</el-button
      ><el-button @click="$router.push('/mainPlay')">返回</el-button>
    </div>
    <el-dialog
      width="45%"
      :visible.sync="isShow"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <div class="txtTile">
        请OpenHarmony开源开发者成长计划活动参与方（下称“您”）仔细阅读本协议。
      </div>
      <div class="title1">1、活动参与资格</div>
      <div class="title2">您承诺并保证：</div>
      <div class="title3">
        1.1您为年满18岁的高校在校学生，有资格参与OpenHarmony开源开发者成长计划活动（下称“本活动”）报名；
      </div>
      <div class="title3">
        1.2您能够向本活动组织方（下称“组织方”）提供身份证及学生证等有效证件。
      </div>
      <div class="title1">2、用户信息收集</div>
      <div class="title2">2.1组织方可能收集的用户信息</div>
      <div class="title3">
        （a）组织方在组织本活动过程中，可能会收集、储存和使用下列与您有关的个人信息。如果您不提供相关个人信息，可能无法完成本活动注册或无法参与本活动评审，或者无法达到相关本活动拟达到的效果。
      </div>
      <div class="title3">
        （b）您在进行本活动注册或参与活动过程中，组织方可能向您收集的相关个人信息包括但不限于：姓名、身份证号码、电话号码、电子邮箱、银行卡号等。
      </div>
      <div class="title3">
        （c）您在进行本活动注册或参与活动过程中，可以不断访问、更新您的个人信息。
      </div>
      <div class="title2">2.2组织方可能的用户信息使用方式</div>
      <div class="title3">
        （a）用于本活动报名资格验证、身份验证、奖项评审、发送本活动通知、存档和备份等用途，确保您可参加本活动报名及评审等后续相关流程；
      </div>
      <div class="title3">
        （b）在相关网站（包括但不限于OpenHarmony官方网站）发布您对本活动的参与信息及相关评审结果；
      </div>
      <div class="title3">
        （c）向您收集本活动相关建议，以不断完善本活动体验；
      </div>
      <div class="title3">
        （d）为让您有更好的活动参与体验，在符合相关法律法规的前提下，组织方可能将通过某一项注册或提交所收集的信息，用于本活动的其他场景；
      </div>
      <div class="title3">（e）本活动网站认证及升级等其他合理事项。</div>
      <div class="title2">2.3组织方可能的非个人身份信息使用方式</div>
      <div class="title3">
        本协议中，非个人身份信息是指无法用于确定个人身份的信息。组织方可能出于统计等目的使用、汇总参与方提交的非个人身份信息。
      </div>
      <div class="title2">2.4其他</div>
      <div class="title3">
        （a）如在本活动结束前，您需要注销本活动报名账号及相关信息，则可以通过组织方公示联系方式（官网、邮箱、公众号）联系组织方。
      </div>
      <div class="title3">
        （b）如在本活动结束后，您不同意组织方对您的个人信息进行处理，则可以通过组织方公示联系方式（官网、邮箱、公众号）联系组织方。
      </div>
      <div class="title1">3、提交内容</div>
      <div class="title3">
        3.1
        “提交内容”是指您在本活动任何阶段向组织方提交的与本活动有关的任何材料，包括但不限于与您参加本活动相关项目的名称、摘要、内容及相关代码等。
      </div>
      <div class="title3">
        3.2
        提交内容授权：您免费授予组织方在全球范围内永久地、非排他地、不可撤销地，复制、发布、展示或以其他形式使用您的提交内容的权利。
      </div>
      <div class="title3">
        3.3
        如您需要向OpenHarmony社区贡献与本活动相关的代码，需根据OpenHarmony社区指南等规定另行签订DCO或CLA。
      </div>
      <div class="title1">4、承诺与保证</div>
      <div class="title2">您承诺并保证：</div>
      <div class="title3">4.1 您是自愿参加本活动；</div>
      <div class="title3">
        4.2
        您与组织方之间当前并不存在任何保密、信托、代理或其他关系或隐含的实际合同。
      </div>
      <div class="title3">
        4.3 您在本活动注册、报名及后续流程中提供的个人信息均真实、准确；
      </div>
      <div class="title3">4.4 您在本活动中向组织方提交内容：</div>
      <div class="title3">（a）是原件；</div>
      <div class="title3">（b）您拥有提交内容的所有权利；</div>
      <div class="title3">
        （c）不侵犯任何其他组织或个人的权利或您可能对其承担的任何义务；
      </div>
      <div class="title3">（d）不含恶意、诽谤、诽谤、色情或淫秽内容；</div>
      <div class="title3">（e）不存在其他违反相关法律或法规的情形。</div>
      <div class="title1">5、责任及责任限制</div>
      <div class="title2">5.1 责任</div>
      <div class="title3">
        在本协议中，“责任”是指包括合同、侵权或由其他情况导致的所有责任。
      </div>
      <div class="title2">
        5.2对于因以下原因引起的与任何指控或第三方法律诉讼有关的所有责任（包括但不限于损害、损失、维权合理支出等费用），您应赔偿组织方的相关损失：
      </div>
      <div class="title3">（a）与您申请和参与本活动有关的作为或不作为；</div>
      <div class="title3">
        （b）您提交内容侵犯了任何其他组织或个人的权利或您可能由此承担的任何义务；
      </div>
      <div class="title3">
        （c）与您申请和参与本活动有关的其他违法、违规情形；
      </div>
      <div class="title2">5.3 组织方责任限制</div>
      <div>根据本协议，组织方的责任仅限于直接损失。</div>
      <div class="title2">
        5.4
        除本协议明确规定的陈述、声明或保证外，任何一方不应向任何其他方，以任何形式，承担与本协议相关的责任或受之约束。
      </div>
      <div class="title2">5.5奖金与证书</div>
      <div class="title3">
        如果您违反本协议，则组织方无需向您提供任何奖金或证书。
      </div>
      <div class="title1">6、一般条款</div>
      <div class="title2">6.1 非聘用协议或合同</div>
      <div class="title3">
        （a）您了解并同意，您向组织方提交内容并不建立任何雇佣、聘用、代理、合伙或合资关系。
      </div>
      <div class="title3">
        （b）您了解并同意，本协议中的任何内容均不得解释为与组织方或任何相关机构的雇用或聘用合同。
      </div>
      <div class="title2">6.2 本协议转让</div>
      <div class="title3">
        （a）未经组织方事先书面同意，您不得转让本协议或其任何部分。
      </div>
      <div class="title3">
        （b）组织方将通知发布于组织方官方网站或通过您注册时提供的联系方式向您发送均构成通知发出。组织方可以在通知发出后转让本协议或其任何部分。
      </div>
      <div class="title2">6.3 协议完整性</div>
      <div class="title3">
        （a）本协议构成了您与组织方关于您参与本活动的完整协议。
      </div>
      <div class="title3">
        （b）如本协议中一项或多项条款不可执行，不影响本协议其他条款的效力。
      </div>
      <div class="title2">6.4协议生效</div>
      <div class="title3">本协议于您阅读并勾选后生效。</div>
      <div class="title2">6.5 协议修订</div>
      <div class="title3">
        组织方可视情况不定时以书面形式修订本协议。如本协议修订造成您本协议下的权利或义务发生实质变化，组织方将在修订生效前通过在官方网站显著位置提示或向您推送通知或以其他方式通知您。若您继续参加本活动，即表示同意本协议修订版本的约束。
      </div>
      <div class="title2">6.6 适用法律</div>
      <div class="title3">
        本协议的成立、生效与解释、履行及争议解决均适用中华人民共和国法律。
      </div>
    </el-dialog>
  </div>
</template>
<script>
import cardFile from "./commonComponent/uploadfile.vue";
export default {
  components: {
    cardFile,
  },
  data() {
    return {
      isShow: false,
      iscla: false,
      isDisabled: true,
      ischeckBox: false,
      uploadUrl: "/signUp/uoload",
      acceptT: " .jpg, .gif, .png, .jpeg",
      isShowImage: false,
      fileList: [],
      ruleForm: {
        subjectId: "",
        userName: "",
        school: "",
        professional: "",
        address: "",
        phoneNumber: "",
        giteeAccount: "",
        email: "",
        studentImage: "",
      },
      registerRules: {
        userName: [
          {
            required: true,
            validator: this.$utils.checkUserName,
            trigger: "blur",
          },
        ],
        school: [
          {
            required: true,
            validator: this.$utils.checkUserName,
            trigger: "blur",
          },
        ],
        professional: [
          {
            required: true,
            validator: this.$utils.checkUserName,
            trigger: "blur",
          },
        ],
        address: [
          {
            required: true,
            validator: this.$utils.checkUserAdress,
            trigger: "blur",
          },
        ],
        phoneNumber: [
          {
            required: true,
            validator: this.$utils.checkPhone,
            trigger: "blur",
          },
        ],
        giteeAccount: [
          {
            required: true,
            validator: this.$utils.checkUserGitee,
            trigger: "blur",
          },
        ],
        email: [
          {
            required: true,
            validator: this.$utils.checkEmail,
            trigger: "blur",
          },
        ],
        studentImage: [
          {
            required: true,
            message: " ",
          },
        ],
      },
    };
  },
  methods: {
    open() {
      this.isShow = true;
    },
    submit() {
      this.$refs["ruleForm"].validate(async (valid) => {
        this.isShowImage = !this.ruleForm.studentImage;
        if (valid && !this.isShowImage) {
          let subjectId = JSON.parse(sessionStorage.getItem("newdetail")).id;
          let obj = Object.assign({}, this.ruleForm, { subjectId });
          let res = await this.$axios.post("/signUp/saveSignUp", obj);
          if (res.data.code == 0) {
            this.isShowImage = false;
            this.$message.success(res.data.msg);
            this.$router.push("/registerSuccess");
          }
        }
      });
    },
    removeF() {
      this.fileList = [];
      this.ruleForm.studentImage = "";
      this.isShowImage = false;
      setTimeout(() => {
        this.iscla = false;
      }, 1000);
    },
    afterUploaded(url) {
      this.ruleForm.studentImage = url;
      this.isShowImage = false;
      this.iscla = true;
    },
    changeBox(val) {
      console.log(val);
      this.ischeckBox = val;
      this.isDisabled = !val;
    },
  },
};
</script>
<style lang="less" scoped>
.regist {
  height: 100%;
  //   padding: 0 340px;
  .title {
    height: 32px;
    font-size: 24px;
    font-weight: bold;
    line-height: 32px;
    color: #000000;
    opacity: 0.9;
    margin: 60px 0 30px 0px;
    text-align: center;
  }
  .register-box-content-form {
    text-align: center;
    text-align: -webkit-center;
    ::v-deep .el-form-item {
      width: 36%;
      margin-bottom: 20px;
    }
    .agreeClass {
      text-align: left;
    }
    .upload {
      text-align: left;
    }
    ::v-deep .tips {
      text-align: left;
      color: #f56c6c;
      margin-bottom: -20px;
      font-size: 12px;
    }
  }
  .btn {
    text-align: center;
    ::v-deep .el-button--primary {
      width: 120px;
      height: 40px;
      background: #0a59f7;
      border-radius: 2px;
    }
    .submitClass {
      background: #b4b4b4;
    }
    ::v-deep .el-button--default {
      width: 120px;
      height: 40px;
      background: #ffffff;
      border: 1px solid rgba(0, 0, 0, 0.2);
      border-radius: 2px;
    }
  }
  ::v-deep .el-dialog {
    max-height: 500px;
    overflow: auto;
  }
  ::v-deep .el-dialog__header {
    padding: 0;
  }
  ::v-deep .el-dialog__body {
    padding: 20px;
    div {
      line-height: 24px;
    }
    .txtTile {
      color: #000;
      font-weight: bold;
      text-align: center;
    }
    .title1 {
      color: #000;
      font-weight: 700;
    }
    .title2 {
      color: #000;
      font-weight: 500;
      text-indent: 2em;
    }
    .title3 {
      text-indent: 2em;
    }
  }
}
@media screen and (max-width: 500px) {
  .regist {
    padding: 0 10px 0px 0px;
    .register-box-content-form {
      ::v-deep .el-form-item {
        width: 100%;
        margin-bottom: 20px;
      }
      ::v-deep .el-form-item__label {
        width: 100px !important;
      }
      ::v-deep .el-form-item__content {
        margin-left: 100px !important;
      }
    }
    ::v-deep .el-dialog {
      width: 90% !important;
      max-height: 400px;
      .txtTile {
        margin-right: 16px;
      }
      .el-dialog__header {
        position: fixed;
        width: 90%;
        height: 20px;
        .el-dialog__headerbtn {
          position: absolute;
          top: 10px;
          right: 10px;
        }
      }
    }
  }
}
</style>
